<template>
	<div class="payment">
	  <div class="user-info">
			<div class="item"><label class="label">您好，请选择就餐人数</label></div>
			<div class="item"><input placeholder="你的手机号" v-model="phone" type="text"></div>
			<div class="item"></div>
		</div>
		<div class="food-info">
			<div class="card-hd"><img  class="avator" :src="seller.avatar"><span class="title">{{seller.name}}</span></div>
			<div v-for="item in selectedGoods" :key="item.id" class="food-item">
				<label>{{item.name}}</label>
				<div class="mount"><span class="number" v-if="item.count > 1">x{{item.count}}</span>¥{{item.count * item.price}}</div>
			</div>
		</div>
		<div class="footer">
			<!-- <div class="money" v-if="false">待支付¥{{this.allPay}}</div>
			<div class="btn-pay"  v-if="false" @click="pay">支付</div> -->
			<div class="money">继续点餐</div>
			<div class="btn-pay" >下单</div>
		</div>
	</div>
</template>
<script>
    let config = require('../../../config');
    config = process.env.NODE_ENV === 'development' ? config.dev : config.build;
	export default {
		data() {
			return {
				selectedGoods: [],
				seller: {},
				phone: '1'
			};
		},
		computed: {
			allPay() {
				return this.selectedGoods.reduce((a, b) => {
					return a + (b.count * b.price);
				}, 0);
			}
		},
		watch: {
			'$route': 'fetchData'
		},
		created() {
			this.selectedGoods = JSON.parse(window.selectedGoods);
			this.seller = JSON.parse(window.sellerPay);
		},
		methods: {
			pay() {
				const goods = this.selectedGoods.map(good => {
                    return {productId: good.id, productQuantity: good.count};
                });
                const ERR_OK = 0;
                this.$http.post('/sell/buyer/order/create', {
                    'openid': getCookie('openid'),
                    'phone': this.phone,
                    'name': this.name,
                    'address': this.address,
                    'items': JSON.stringify(goods)}
                ).then((respones) => {
                    respones = respones.data;
                    if (respones.code === ERR_OK) {
                      location.href = config.wechatPayUrl +
                        '?openid=' + getCookie('openid') +
                        '&orderId=' + respones.data.orderId +
                        '&returnUrl=' + encodeURIComponent(config.sellUrl + '/#/order/' + respones.data.orderId);
                    } else {
                      alert(respones.msg);
                    }
                });

                window.selectedGoods = '[]';
                // 支付成功清空localstorage selectedGoods
			}
		}
	};
  function getCookie(name) {
	const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
	const arr = document.cookie.match(reg);
    if (arr != null && arr.length > 2) {
		return unescape(arr[2]);
	} else {
		return null;
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
	.payment {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.user-info {
			margin-top: 10px;
			background-color: #fff;
			margin-bottom: 20px;
			.item {
				padding: 0 14px;
				display: flex;
				border-bottom: 1px solid #eee;
				line-height: 44px;
				label {
					padding-left: 4px;
					width: 100%;
					color: #333;
				}
				input {
				  line-height: 44px;
				  width: 100%;
				  outline: 0;
				  color: #333;
				}
			}
		}
		.food-info {
			background-color: #fff;
			.avator {
				width: 19px;
				height: 19px;
				margin-right: 10px;
			}
			.card-hd {
				display: flex;
				align-items: center;
				padding: 14px;
				border-bottom: 1px solid #eee;
			}
			.food-item {
				padding: 0 14px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				label {
					display: inline-block;
					padding: 14px 0;
					flex: 1;
					color: #666;
				}
				.mount {
					display: flex;
					flex: 1;
					justify-content: flex-end;
					.number {
						padding-right: 20px;
					}
				}
			}
		}
		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 44px;
			display: flex;
			background-color: #FFCC00;
			color: #fff;
			.money {
				flex: 1;
				padding-left: 20px;
				line-height: 44px;
			}
			.btn-pay {
				flex: 1;
				line-height: 44px;
				text-align: center;
				background-color: #56d176;
			}

		}
	}


</style>
